/*
* @Author: lenovo
* @Date:   2017-11-16 18:40:46
* @Last Modified by:   lenovo
* @Last Modified time: 2017-11-30 17:58:19
*/
*{
	margin:0;
	padding: 0;
}
li{
	list-style: none;
}
body{
	color:darkgreen;
	background-image: url(../../image/musictwo.jpg);
}

audio{
	width: 100%;
	height: 35px;
	margin-top:-1.5px;
	border:1px solid white;
	/*border-radius: 30px;*/
}
.container .row .music-wrap{
	height: 500px;
}
.container .row .music-wrap .music-left{
	width: 100%;
	height: 500px;
}
.container .row .music-wrap .music-left .lrc-area{
	width: 100%;
	height: 463px;
	overflow: scroll;
	margin: 0 auto;
	background-size: 100% 100%;
}
.container .row .music-wrap .music-left .lrc-area p{
	width: inherit;
	height: 30px;
	line-height: 30px;
	/*border:1px solid black;*/
	text-align: center;
	margin: 0 auto;
	transition: color 1s backgroundColor 2s;
}
.container .row .music-wrap .music-left .lrc-area p:nth-child(1){
	margin-top: 30px;
}
@media screen and (min-width:414px){
	/* 大于414px 右边的操作区域隐藏，下面的隐藏*/
	.hide-operate{
		display: none;
	}

	.container .row .music-wrap .part{
		float: left;
	}
	.container .row .music-wrap .music-right{
		width: 100%;
		background-color: rgba(0,0,0,.4);
	}
	.container .row .music-wrap .music-right .right-item{
		width: 100%;
	}
	.container .row .music-wrap .music-right .right-item li{
		text-align: center;
		width: 100%;
		height: 40px;
		line-height: 40px;
		/*border-bottom: 1px solid wheat;*/
	}
	.container .row .music-wrap .music-right .music-list{
		height: 300px;
		/*overflow: scroll;*/
		margin-bottom: 0px;
		border-bottom: 1px solid wheat;
	}
	.container .row .music-wrap .music-right .music-list li{
		color:white;
		transition: color 1s;
		cursor: pointer;
	}
	.container .row .music-wrap .music-right .music-list li span{
		display: inline;
		width:40px;
		height: 30px;
		/*border:1px solid red;*/
		margin-left: 10px;
	}
	.container .row .music-wrap .music-right .music-list li:hover{
		text-decoration: none;
		color:gold;
	}
	.container .row .music-wrap .music-right .music-operate{
		height: 198px;
		/*color: blue;*/
		/*background-color: yellow;*/
	}
	.container .row .music-wrap .music-right .music-operate input{
		width:inherit;
		background-color: transparent;
		transition: color 1s;

	}
	.container .row .music-wrap .music-right .music-operate button{
		width: inherit;
		height: 40px;
		background-color: transparent;
		transition: color 1s;
		color:skyblue;
	}
	.container .music-right .music-operate button:hover,.container .music-right .music-operate input:hover{
		color:gold;
	}
}
@media screen and (max-width:414px){
	/* 小于414px,右边的操作区域隐藏，下面的显示 */
	.container .row .music-wrap .music-right{
		display: none;
	}
	.hide-operate{
		display: block;
		width: 100%;
		height: auto;
	}
	.container .row .hide-operate .right-item{
		width: 100%;
	}
	.container .row  .hide-operate .right-item li{
		text-align: center;
		width: 100%;
		height: 40px;
		line-height: 40px;
		/*border-bottom: 1px solid wheat;*/
	}
	.container .row  .hide-operate .music-list{
		height: 300px;
		/*overflow: scroll;*/
		margin-bottom: 0px;
		border-bottom: 1px solid wheat;
	}
	.container .row .hide-operate .music-list li{
		color:white;
		transition: color 1s;
		cursor: pointer;
	}
	.container .row  .hide-operate .hide-music-list li span{
		display: inline;
		width:40px;
		height: 30px;
		/*border:1px solid red;*/
		margin-left: 10px;
	}
	.container .row  .hide-operate .hide-music-list li:hover{
		text-decoration: none;
		color:gold;
	}
	.container .row  .hide-operate .music-operate{
		height: 198px;
		/*color: blue;*/
		/*background-color: yellow;*/
	}
	.container .row .hide-operate .music-operate input{
		width:inherit;
		background-color: transparent;
		transition: color 1s;

	}
	.container .row  .music-right .music-operate button{
		width: inherit;
		height: 40px;
		background-color: transparent;
		transition: color 1s;
		color:darkgreen;
	}
	.container .hide-operate .music-operate button:hover,.container .hide-operate .music-operate input:hover{
		color:gold;
	}
}